<template>
  <div class="task-container">
    <div class="app-container">
      <SearchBar
        :show-search="true"
      >
        <template #peopleSearch>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="工单编号:">
              <el-input v-model="formInline.taskCode" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="工单状态:">
              <el-select v-model="formInline.status" placeholder="请选择">
                <el-option label="代办" value="1" />
                <el-option label="进行" value="2" />
                <el-option label="取消" value="3" /> <el-option label="完成" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="CXButton" @click="getTaskList(formInline)"><i
                class="el-icon-search"
              /> 查询</el-button>

            </el-form-item>
          </el-form>
        </template>
      </searchbar>

      <!-- 新建按钮   -->
      <el-card>
        <el-button
          icon="el-icon-circle-plus-outline"
          class="new-button"
          type="warning"
          @click="addDialogVisible = true"
        >新建</el-button>
        <el-table
          :data="tableData"
          style="width: 100%;padding-top: 20px; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <!-- prop指定第一列是什么数字 -->
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="taskCode"
            label="工单编号"
          />
          <el-table-column
            prop="innerCode"
            label="设备编号"
          />
          <el-table-column
            prop="taskType.typeName"
            label="工单类型"
          />
          <el-table-column
            prop="createType"
            label="工单方式"
          />
          <el-table-column
            prop="taskStatus"
            label="工单状态"
          />
          <el-table-column
            prop="userName"
            label="运营人员"
          />
          <el-table-column
            prop="createTime"
            label="创建日期"
          >
            <template v-slot="{row}">
              {{ row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewDetail(scope.row)">查看详情
              </el-button>
            </template>
          </el-table-column>

        </el-table>

        <!-- 查看详情 -->
        <el-dialog
          :visible="detailDialogVisible"
          title="工单详情"
          width="60%"
          @close="closeDetailDialog"
        >
          <!-- <span>123132</span> -->
          <el-form label-position="right" label-width="80px" :model="taskDetail">
            <el-form-item label="设备编号">
              <el-input v-model="taskDetail.innerCode" disabled />
            </el-form-item>
            <el-form-item label="创建日期">
              <el-input v-model="taskDetail.createTime" disabled />
            </el-form-item>
            <el-form-item label="取消日期">
              <el-input v-model="taskDetail.taskCode" disabled />
            </el-form-item>
            <el-form-item label="运营人员">
              <el-input v-model="taskDetail.userName" disabled />
            </el-form-item>
            <el-form-item label="工单类型">
              <el-input v-model="taskDetail.taskType.typeName" disabled />
            </el-form-item>
            <el-form-item label="补货数量" />
            <el-form-item label="工单方式">
              <el-input v-model="taskDetail.createType" disabled />
            </el-form-item>
            <el-form-item label="取消原因">
              <el-input disabled />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetBtn">重新创建</el-button>
          </span>
        </el-dialog>
        <!-- 新增 -->
        <el-dialog
          :visible="addDialogVisible"
          title="新增工单"
          width="60%"
          @close="closeAddDialog"
        >
          <!-- <span>这是一段信息</span> -->
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="设备编号" prop="EquipmentNo">
              <el-input v-model="ruleForm.EquipmentNo" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="工单类型" prop="workType">
              <el-select v-model="ruleForm.workType" placeholder="请选择" style="width: 80%;">
                <el-option label="补货工单" value="buhuo" />
              </el-select>
            </el-form-item>
            <el-form-item label="运营人员" prop="people">
              <el-select v-model="ruleForm.people" placeholder="请选择" style="width: 80%;">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="name">
              <el-input v-model="ruleForm.name" style="width: 80%;" />
            </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeAddDialog">取 消</el-button>
            <el-button type="primary" @click="btnOK">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageConfig.pageSize"
            :current-page="pageConfig.pageIndex"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import { getTaskList, getSupplyAlertValue } from '@/api/task'
import EmployeeEnum from '@/constant/employees'
export default {
  components: {
    SearchBar
  },
  data() {
    return {
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      formInline: {
        taskCode: '',
        status: ''
      },
      // 工单详情
      taskDetail: {
        createTime: '',
        innerCode: '',
        taskCode: '',
        taskStatus: '',
        taskType: '',
        userName: ''
      },
      // 点击才显示弹窗
      addDialogVisible: false,
      detailDialogVisible: false,
      workDialogVisible: false,
      tableData: [],
      ruleForm: {
        EquipmentNo: '',
        workType: '',
        people: '',
        name: ''
      },
      rules: {
        EquipmentNo: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        workType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        people: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      workForm: {
        num: ''
      },
      workRule: {
        num: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      total: 0

    }
  },
  created() {
    this.getTaskList(this.pageConfig)
  },
  methods: {
    currentChange(newPage) {
      // 获取页面中的当前页码
      this.pageConfig.pageIndex = newPage
      this.getTaskList(this.pageConfig)
    },
    async showWorkDialogVisible() {
      await getSupplyAlertValue()

      this.workDialogVisible = true
    },
    sureBtn() {
      this.closeWorkDialogVisible()
      // 获取表单
      this.getTaskList(this.pageConfig)
    },
    closeWorkDialogVisible() {
      this.$refs.mesForm.resetFields()
      this.workDialogVisible = false
    },
    closeDetailDialog() {
      // 清空表单
      this.taskDetail = {
        createTime: '',
        innerCode: '',
        taskCode: '',
        taskStatus: '',
        taskType: '',
        userName: ''
      }
      // 关闭弹窗
      this.detailDialogVisible = false
    },
    resetBtn() {
      this.ruleForm = {
        EquipmentNo: this.taskDetail.innerCode,
        workType: this.taskDetail.taskType.typeName,
        people: this.taskDetail.userName,
        name: ''
      }
      // 关闭详情弹窗
      this.closeDetailDialog()
      // 弹出新增表单
      this.addDialogVisible = true
    },
    closeAddDialog() {
      // 清空表单
      this.ruleForm = {
        EquipmentNo: '',
        workType: '',
        people: '',
        name: ''
      }
      // 清空验证
      this.$refs.ruleForm.resetFields()
      // 关闭弹窗
      this.addDialogVisible = false
    },
    viewDetail(row) {
      this.detailDialogVisible = true
      this.taskDetail = row
    },
    async btnOK() {
      await this.$refs.ruleForm.validate()
    },
    async getTaskList(params) {
      const res = await getTaskList(params)
      this.total = +res.data.totalCount
      const list = res.data.currentPageRecords.map(item => {
        const task = {}
        // 创建类型(0：自动 1：手动)
        task.createType = item.createType
        // 工单编号
        task.taskCode = item.taskCode
        // 设备编号
        task.innerCode = item.innerCode
        // 工单类型信息
        task.taskType = item.taskType
        // 枚举处理 工单方式
        task.createType = EmployeeEnum.createTypeList.find(el => el.id === item.createType).value
        // 枚举处理 工单状态
        const status = EmployeeEnum.taskStatusList.find(el => el.id === item.taskStatus).value
        task.taskStatus = status

        task.userName = item.userName
        // 创建日期
        task.createTime = item.createTime.replace('T', ' ')
        return task
      })
      this.tableData = list
    }
  }

}
</script>

<style>

</style>
